
$(function () {
    // 需求1：渲染文章类别管理
    initArtCateList()

    function initArtCateList () {
        // 发起ajax请求
        axios({
            url: '/my/article/cates'
        }).then(({ data: res }) => {
            if (res.status != 0) {
                return layer.msg(res.message)
            }
            // 定义数组 渲染页面
            let arr = []
            res.data.forEach(ele => {
                if (ele.Id < 1) {
                    return
                }
                arr.push(`
                <tr>
                <td>${ele.Id}</td>
                <td>${ele.name}</td>
                <td>${ele.alias}</td>
                <td>
                    <button id="updateBtn" data-id="${ele.Id}" class="layui-btn layui-btn-sm">修改</button>
                    <button id="deleteBtn" data-id="${ele.Id}" class="layui-btn layui-btn-danger layui-btn-sm">删除</button>
                </td>
            </tr>
                `)
            })
            // 循环结束将数组数据添加到tbody
            $('tbody').empty().html(arr.join(''))
        })
    }

    // 点击添加分类 弹出框 添加文章类别
    let indexOpen = 0
    $('#addCatebtn').on('click', function () {
        indexOpen = layer.open({
            title: '添加文章分类',
            type: 1,
            area: ['500px', '260px'],
            content: `
            <form class="layui-form" action="" id="addForm">
        
            <div class="layui-form-item">
            <label class="layui-form-label">分类名称</label>
            <div class="layui-input-block">
              <input type="text" name="name" required  lay-verify="required" placeholder="请输入分类名称" autocomplete="off" class="layui-input">
            </div>
            </div>
            <div class="layui-form-item">
            <label class="layui-form-label">分类别名</label>
            <div class="layui-input-block">
              <input type="text" name="alias" required  lay-verify="required" placeholder="请输入分类别名" autocomplete="off" class="layui-input">
            </div>
            </div>
            <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
          </div>
            </form>
            `
        });

        // 确认添加 通过委托 让body绑定
        $('body').on('submit', '#addForm', function (e) {
            e.preventDefault()

            // 发送ajax请求
            axios({
                method: 'POST',
                url: '/my/article/addcates',
                data: $('#addForm').serialize()
            }).then(({ data: res }) => {
                if (res.status != 0) return layer.msg(res.message);
                layer.msg("恭喜，添加文章类别成功！")
                // 关闭弹出层
                layer.close(indexOpen)
                // 刷新页面
                initArtCateList()
            })
        })
    })

    // 点击修改按钮 弹出修改框 渲染选中的文章类别 进行修改
    $('body').on('click', '#updateBtn', function () {
        // 先获取到Id 后续根据Id 修改数据
        let id = $(this).attr('data-id')
        // 弹出修改层
        indexOpen = layer.open({
            title: '修改文章分类',
            type: 1,
            area: ['500px', '260px'],
            content: `
            <form class="layui-form" action="" id="editForm" lay-filter="formTest">
            <input type="hidden" name="Id">
            <div class="layui-form-item">
            <label class="layui-form-label">分类名称</label>
            <div class="layui-input-block">
              <input type="text" name="name" required  lay-verify="required" placeholder="请输入分类名称" autocomplete="off" class="layui-input">
            </div>
            </div>
            <div class="layui-form-item">
            <label class="layui-form-label">分类别名</label>
            <div class="layui-input-block">
              <input type="text" name="alias" required  lay-verify="required" placeholder="请输入分类别名" autocomplete="off" class="layui-input">
            </div>
            </div>
            <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
          </div>
            </form>
            `
        });

        // 根据id发送ajax请求 请求单条数据
        axios({
            url: '/my/article/cates/' + id
        }).then(({ data: res }) => {
            if (res.status !== 0) return layer.msg(res.message);
            layui.form.val('formTest', res.data)
        })

        // 点击修改文章类别
        $('body').on('submit', '#editForm', function (e) {
            e.preventDefault()
            // 发起ajax请求
            axios({
                method: 'POST',
                url: '/my/article/updatecate',
                data: $('#editForm').serialize()
            }).then(({ data: res }) => {
                if (res.status !== 0) return layer.msg(res.message)
                layer.msg("恭喜您，文章类别修改成功！")
                // 关闭弹出层
                layer.close(indexOpen)
                // 刷新页面
                initArtCateList()
            })
        })
    })

    // 点击删除 删除所选文章类别
    $('body').on('click', '#deleteBtn', function () {
        // 先获取到Id 后续根据Id 修改数据
        let id = $(this).attr('data-id')
        layer.confirm('确定删除吗?', { icon: 3, title: '提示' }, function (index) {
            // 发起删除ajax请求
            axios({
                url: '/my/article/deletecate/' + id
            }).then(({ data: res }) => {
                if (res.status != 0) {
                    return layer.msg(res.message)
                }
                layer.msg("恭喜您，删除文章类别成功！")
                // 刷新页面
                initArtCateList()
            })
            layer.close(index);
        });
    })
})